<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学业信息图</title>
    <!-- Vue.js, Axios, and Highcharts libraries -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/area.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body style="background-color: #000000; font-family: Arial, sans-serif; color: #333;">
<div id="app">
    <!-- 图表区域 -->
    <div style="display: flex; flex-direction: row; justify-content: center;">
        <div class="t_main_narrow">
            <div id="scatterChart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="t_main_narrow">
            <div id="lineChart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="t_main_narrow">
            <div id="areaChart" style="width: 100%; height: 300px;"></div>
        </div>
    </div>
    <div style="display: flex; flex-direction: row; justify-content: center;">
        <div class="t_main_wide">
            <div id="pieChart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="t_main_wide">
            <div id="comboChart" style="width: 100%; height: 300px;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            allUser: 0
        },
        created: function () {
            this.loadUserData();
        },
        methods: {
            loadUserData() {
                var that = this;
                axios.post('http://localhost:8080/api/user-count/user-number')
                    .then(function (res) {
                        if (res.data.code === 1) {
                            that.allUser = res.data.data.allUser;
                        } else {
                            window.alert(res.data.msg);
                        }
                    })
                    .catch(function (err) {
                        console.log("请求失败");
                    });
            }
        }
    });

    function loadScatterChart() {
        Highcharts.chart('scatterChart', {
            chart: {
                type: 'scatter',
                zoomType: 'xy',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderRadius: 5,
                borderWidth: 1,
                borderColor: '#ccc'
            },
            title: {
                text: '学生出勤率统计',
                style: {
                    color: '#53a9cd',
                    fontSize: '16px'
                }
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: '周',
                    style: {
                        color: '#333'
                    }
                },
                categories: ['第一周', '第二周', '第三周', '第四周', '第五周', '第六周', '第七周', '第八周', '第九周', '第十周'],
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            yAxis: {
                title: {
                    text: '出勤率(%)',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            series: [{
                name: '计算机科学',
                data: [[0, 95], [1, 92], [2, 94], [3, 96], [4, 93], [5, 91], [6, 90], [7, 94], [8, 97], [9, 95]],
                color: '#4CAF50'
            }, {
                name: '电子技术',
                data: [[0, 98], [1, 85], [2, 87], [3, 86], [4, 89], [5, 90], [6, 85], [7, 88], [8, 95], [9, 89]],
                color: '#2196F3'
            }],
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        symbol: 'circle'
                    }
                }
            },
            legend: {
                itemStyle: {
                    color: '#333'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.x})<br/>'
            },
            credits: {
                enabled: false
            },
            accessibility: {
                enabled: false
            }
        });
    }

    function loadLineChart() {
        Highcharts.chart('lineChart', {
            chart: {
                type: 'line',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderRadius: 5,
                borderWidth: 1,
                borderColor: '#ccc'
            },
            title: {
                text: '学生考试平均分成绩趋势',
                style: {
                    color: '#53a9cd',
                    fontSize: '16px'
                }
            },
            xAxis: {
                categories: ['第一次考试', '第二次考试', '第三次考试', '第四次考试', '期中考试', '第六次考试', '第七次考试', '第八次考试', '第九次考试', '期末考试'],
                title: {
                    text: '考试',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            yAxis: {
                title: {
                    text: '分数',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            series: [{
                name: '计算机科学',
                data: [85, 88, 82, 81, 84, 87, 88, 83, 85, 87],
                color: '#53a9cd'
            }, {
                name: '电子技术',
                data: [78, 86, 85, 84, 83, 88, 84, 86, 89, 90],
                color: '#b370bf'
            }],
            legend: {
                itemStyle: {
                    color: '#333'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
            },
            credits: {
                enabled: false
            },
            accessibility: {
                enabled: false
            }
        });
    }

    function loadAreaChart() {
        Highcharts.chart('areaChart', {
            chart: {
                type: 'area',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderRadius: 5,
                borderWidth: 1,
                borderColor: '#ccc'
            },
            title: {
                text: '各学期学生总人数',
                style: {
                    color: '#53a9cd',
                    fontSize: '16px'
                }
            },
            xAxis: {
                categories: ['2019年春', '2019年秋', '2020年春', '2020年秋', '2021年春', '2021年秋', '2022年春', '2022年秋', '2023年春', '2023年秋'],
                title: {
                    text: '学期',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            yAxis: {
                title: {
                    text: '人数',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            series: [{
                name: '计算机科学',
                data: [220, 235, 230, 253, 270, 277, 286, 298, 304, 311],
                color: '#cfd47f'
            }, {
                name: '电子技术',
                data: [180, 192, 220, 216, 240, 240, 237, 260, 272, 260],
                color: '#009688'
            }],
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            legend: {
                itemStyle: {
                    color: '#333'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
            },
            credits: {
                enabled: false
            },
            accessibility: {
                enabled: false
            }
        });
    }

    function loadPieChart() {
        Highcharts.chart('pieChart', {
            chart: {
                type: 'pie',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderRadius: 5,
                borderWidth: 1,
                borderColor: '#ccc'
            },
            title: {
                text: '学生成绩分布',
                style: {
                    color: '#53a9cd',
                    fontSize: '16px'
                }
            },
            series: [{
                name: '学生人数',
                colorByPoint: true,
                data: [{
                    name: '优秀(90-100)',
                    y: 35,
                    sliced: true,
                    selected: true
                }, {
                    name: '良好(80-89)',
                    y: 55
                }, {
                    name: '中等(70-79)',
                    y: 75
                }, {
                    name: '及格(60-69)',
                    y: 45
                }, {
                    name: '不及格(60以下)',
                    y: 20
                }],
                colors: ['#73c676', '#da9bdf', '#7eadd2', '#59b6a0', '#9C27B0']
            }],
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b> of total<br/>'
            },
            credits: {
                enabled: false
            },
            accessibility: {
                enabled: false
            }
        });
    }

    function loadComboChart() {
        Highcharts.chart('comboChart', {
            chart: {
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderRadius: 5,
                borderWidth: 1,
                borderColor: '#ccc'
            },
            title: {
                text: '各专业毕业率和就业率',
                style: {
                    color: '#53a9cd',
                    fontSize: '16px'
                }
            },
            xAxis: {
                categories: ['计算机科学', '智能科学', '物联网工程', '电子技术', '自动化'],
                title: {
                    text: '专业',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            yAxis: {
                title: {
                    text: '百分比(%)',
                    style: {
                        color: '#333'
                    }
                },
                labels: {
                    style: {
                        color: '#333'
                    }
                }
            },
            series: [{
                type: 'column',
                name: '毕业率',
                data: [95, 90, 85, 88, 92],
                color: '#a5dbb0'
            }, {
                type: 'line',
                name: '就业率',
                data: [88, 85, 75, 82, 70],
                color: '#bd94d1'
            }],
            plotOptions: {
                column: {
                    borderWidth: 0,
                    borderRadius: 3
                },
                line: {
                    marker: {
                        radius: 4,
                        lineColor: '#FFFFFF',
                        lineWidth: 1
                    }
                }
            },
            legend: {
                itemStyle: {
                    color: '#333'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
            },
            credits: {
                enabled: false
            },
            accessibility: {
                enabled: false
            }
        });
    }

    (function () {
        loadScatterChart();
        loadLineChart();
        loadAreaChart();
        loadPieChart();
        loadComboChart();
    })();
</script>

<style>
    .t_main_narrow, .t_main_wide {
        height: 310px;
        margin: 10px;
        border: 1px solid #ccc;
        background-color: #f1eeee;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    .t_main_narrow {
        width: 400px;
    }

    .t_main_wide {
        width: 900px;
    }
</style>
</body>
</html>
